<template>
	<view>
		<view style="height: 47upx;"></view>
		<view class="user-info">
			<image src="/static/update-phone.png" class="user-icon"></image>
			<view class="user-content">
				<view class="desc-text">当前绑定手机号</view>
				<view class="phone-text">{{userInfo.phoneEncipher || ''}}</view>
			</view>
		</view>
		<view class="form-view">
			<view class="form-item">
				<view class="form-label ">新手机</view>
				<view class="form-content">
					<input type="number" v-model="formData.phoneNumber" placeholder="输入新的手机号码" class="input-css"
						placeholder-class="plac-css" maxlength="11" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label ">验证码</view>
				<view class="form-content">
					<input v-model="formData.phoneCode" placeholder="输入验证码" class="input-css"
						placeholder-class="plac-css" maxlength="6" />
					<view class="code-button" @click="getCode">{{codeTime != 60 ? codeTime + 's后重新获取' : '获取验证码'}}</view>
				</view>
			</view>
		</view>
		<FloatView>
			<FloatButton @click="onSubmit">确认更换</FloatButton>
		</FloatView>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				codeTime: 60,
				timer: null,
				userInfo: {
					phoneEncipher: ''
				},
				formData: {
					phoneNumber: "",
					phoneCode: ""
				}
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			async getUserInfo() {
				uni.$util.showLoading()
				const res = await uni.$api.getUserInfo().finally(uni.finally)
				this.userInfo = res.data
			},
			async onSubmit() {
				const showToast = uni.$util.showToast
				const regExp = uni.$util.regex
				if (!this.formData.phoneNumber) return showToast('请输入手机号码')
				if (!regExp.phone.test(this.formData.phoneNumber)) return showToast('请输入正确的手机号码')
				if (!this.formData.phoneCode) return showToast('输入验证码')
				uni.$util.showLoading()
				await uni.$api.updatePhone(this.formData).finally(uni.finally)
				uni.setStorageSync('token', '')
				await uni.$util.showSuccess()
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			/**
			 * 获取验证码
			 */
			async getCode() {
				const showToast = uni.$util.showToast
				const regex = uni.$util.regex
				if (this.codeTime != 60 || this.timer) return
				if (!this.formData.phoneNumber) return showToast('请输入手机号')
				if (!regex.phone.test(this.formData.phoneNumber)) return showToast('请输入正确的手机号')
				uni.$util.showLoading()
				const res = await uni.$api.sendCode({
					phoneNumber: this.formData.phoneNumber,
					sendType: '3'
				}).finally(uni.finally)
				this.timer = setInterval(() => {
					this.codeTime--
					if (this.codeTime === 0) {
						this.codeTime = 60
						this.clearIntervalTimer()
					}
				}, 1000)
				uni.$util.showToast('已发送验证码, 请注意查收')
			},
			/**
			 * 取消定时器
			 */
			clearIntervalTimer() {
				clearInterval(this.timer)
				this.timer = null
			},
		}
	}
</script>

<style scoped lang="scss">
	.user-info {
		width: 100%;
		padding-left: 54upx;
		@extend .row-start;
		margin-bottom: 22upx;

		.user-icon {
			width: 69upx;
			height: 69upx;

		}

		.user-content {
			margin-left: 13upx;

			.desc-text {
				font-size: 22rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #000143;
			}

			.phone-text {
				font-size: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #000143;
			}
		}
	}

	.form-view {
		width: 707rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 14rpx;
		padding: 12upx 40upx;


		.form-item {
			width: 100%;
			@extend .row-between;
			padding: 22upx 0;

			.form-label {
				font-size: 29rpx;
				font-weight: 400;
				color: #000143;
			}

			.form-content {
				width: calc(100% - 109upx);
				@extend .row-between;

				.input-css {
					flex: 1;
					font-size: 29rpx;
					font-weight: 400;
				}

				.plac-css {
					font-size: 29rpx;
					font-weight: 400;
					color: #B2B2CA;
				}



				.code-button {
					width: 187rpx;
					height: 67rpx;
					border-radius: 7rpx;
					border: 1rpx solid #FF2615;
					font-size: 25rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FF2615;
					@extend .column;
				}
			}
		}

		.form-item+.form-item {
			border-top: 1px solid #E9E9F4;
		}
	}
</style>